﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>幻灯片轮播特效</title>

    <link href="flexslider.css" rel="stylesheet" />
    <!--<link href="/scripts/flexslider/flexslider.css" rel="stylesheet" />-->

</head>
    <body>
        
        <div class="index-banner">
            <div class="flexslider">
                <ul class="slides">
                    <li><a href="#" style="background: url(images/1.jpg) no-repeat center top; height: 600px;"></a></li>
                    <li><a href="#" style="background: url(images/2.jpg) no-repeat center top; height: 600px;"></a></li>
                </ul>
            </div>
        </div>

        <!--二次开发模版写法：

            <div class="index-banner">
                <div class="flexslider">
                    <ul class="slides">
                        <%set DataTable bannerList=get_plugin_method("Web.Plugin.Advert", "Advert", "get_advert_list",1)%>
                        <%loop bdr bannerList%><li><a href="{bdr[link_url]}" style="background:url({bdr[img_url]}) no-repeat center top;height: 600px;"></a></li><%/loop%>                    
                    </ul>
                </div>
            </div>
            -->


        <script src="../jquery/jquery-1.11.2.min.js"></script>
        <script src="jquery.flexslider-min.js"></script>
        
        <!--<script src="/scripts/jquery/jquery-1.11.2.min.js"></script>-->
        <!--<script src="/scripts/flexslider/jquery.flexslider-min.js"></script>-->
        <script type="text/javascript">
            $(function () {
                $(".flexslider").flexslider({
                    directionNav: false, //左右切换轮播按钮
                    controlNav: true //控制播放次序小圆点按钮
                });
            });
        </script>

    </body>
</html>
